<template>
  <div>
    <a-modal
      title="排班设置"
      v-model="visible"
      :width="800"
      @ok="onCancel"
      @cancel="onCancel"
    >
      <a-spin :spinning="loading">
        <FullCalendar
          firstDay="1"
          weekNumberCalculation="ISO"
          ref="fullCalendar"
          defaultView="dayGridMonth"
          :plugins="calendarPlugins"
          :events="eventData"
          @dateClick="setSchedule"
          @eventClick="setDate"
        />
      </a-spin>
    </a-modal>
    <a-modal
      title="排班设置"
      v-model="scheduleVisible"
      :width="400"
      @ok="onSubmit"
      @cancel="onCancelVisile"
    >
      <a-form-model
        ref="form"
        :rules="calendarRules"
        :model="calendarForm"
      >
        <a-form-model-item label="工作状态" prop="event_type">
          <a-select v-model="calendarForm.event_type">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
// import { delSchedule, getAddSchedule, getSchedule, postAddSchedule } from '@/api/schedule'
import { delSchedule, getAddSchedule, getSchedule, postAddSchedule } from '@/api/schedule'
import moment from 'moment'
export default {
  props: {
    uid: {
      type: String,
      default: ''
    }
  },
  components: {
    FullCalendar
  },
  name: 'UserCalendar',
  data () {
    return {
      calendarForm: {},
      calendarRules: {
        event_type: [{ required: true, message: '必须选择当天工作状态', trigger: 'blur' }]
      },
      // buttonText: {
      //   today: '今天',
      //   month: '月',
      //   week: '周',
      //   day: '天'
      // },
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialDate: moment().format('YYYY-MM-DD')
      },
      eventData: [],
      typeOpts: {},
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      visible: false,
      loading: false,
      scheduleVisible: false
    }
  },
  created () {
    this.getSchedule()
  },
  methods: {
    onCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    onCancelVisile () {
      this.calendarForm = {}
      this.scheduleVisible = false
    },
    getSchedule () {
      const app = this
      getSchedule(this.uid, moment(new Date()).add('year', 0).format('YYYY-MM')).then(res => {
        if (res.status === 0) {
          const date = res.result.data
          this.typeOpts = res.result.type_opts
          for (let i = 0; i < date.length; i++) {
            if (date[i].event_type === '20') {
              date[i].backgroundColor = '#f00'
              date[i].borderColor = '#f00'
            }
            date[i].title = date[i].event_name
            date[i].date = date[i].event_date
          }
          this.eventData = date
          this.visible = true
        } else {
          app.$warning({
            title: res.msg
          })
          this.onCancel()
        }
      })
    },
    setDate (info) {
      const app = this
      this.$confirm({
        title: '是否要删除' + info.event.start + '的日程',
        onOk: () => {
          app.loading = true
          delSchedule(info.event.id).then(res => {
            if (res.status === 0) {
              app.getSchedule()
              app.loading = false
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        }
      })
    },
    onSubmit () {
      const app = this
      const form = {}
      app.$refs.form.validate(valid => {
        if (valid) {
          app.loading = true
          form['calendar[uid]'] = app.uid
          form['calendar[event_type]'] = app.calendarForm['event_type']
          form['calendar[event_date]'] = app.calendarForm['event_date']
          getAddSchedule().then(res => {
            if (res.status === 0) {
              postAddSchedule(form).then(res => {
                if (res.status === 0) {
                  app.getSchedule()
                  app.onCancelVisile()
                  app.loading = false
                }
              })
            }
          })
        } else {
          return false
        }
      })
    },
    setSchedule (info) {
      const app = this
      app.calendarForm.event_date = info.dateStr
      app.scheduleVisible = true
      // app.$confirm({
      //   title: '是否设置' + info.dateStr + '为休息',
      //   onOk: () => {
      //     app.loading = true
      //     getAddSchedule().then(res => {
      //       if (res.status === 0) {
      //         const parameter = {}
      //         parameter['calendar[uid]'] = app.uid
      //         parameter['calendar[event_type]'] = '20'
      //         parameter['calendar[event_date]'] = info.dateStr
      //         postAddSchedule(parameter).then(res => {
      //           if (res.status === 0) {
      //             app.getSchedule()
      //             app.loading = false
      //           }
      //         })
      //       }
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped>

</style>
